<template>
  <el-dropdown @command="handleCommand" class="topnav">
    <span class="avatar-dropdown">
      <!-- 头像 -->
      <!--<el-avatar class="user-avatar" :src="avatar"></el-avatar>-->
      <!-- <img class="user-avatar" :src="avatar" alt="" /> -->
      <!-- 用户名 -->
      <div class="user-name">
        {{ username }}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </div>
    </span>

    <el-dropdown-menu slot="dropdown">
       <!-- <el-dropdown-item command="password">修改密码</el-dropdown-item> -->
        <el-dropdown-item command="account">账户管理</el-dropdown-item>
      <el-dropdown-item command="logout">退出登录</el-dropdown-item>
    </el-dropdown-menu>
    <setpassword @setpasswordok='setpasswordok' :isshowDialog='isshowpassword' @closepass='closepass' :dialogTitle='"设置密码"'></setpassword>
  </el-dropdown>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { recordRoute } from '@/config'
  import setpassword from '@/views/dashboard/component/setpassword'

  export default {
    name: 'VabAvatar',
    data(){
      return{
        //是否显示密码
        isshowpassword:false
      }
    },
    components:{
      setpassword
    },
    computed: {
      ...mapGetters({
        avatar: 'user/avatar',
        username: 'user/username',
      }),
    },
    methods: {
      //跳转到账户中心
      goaccountpage(){
        this.$router.push({
          path:'/baseset/accountmanage'
        })
      },
      setpasswordok(){
        this.isshowpassword = false
      },
      openpasswor(){
        this.isshowpassword = true
      },
      closepass(){
        this.isshowpassword = false
      },
      handleCommand(command) {
        //退出登录
        switch (command) {
          case 'logout':
            this.logout()
            break
          case 'password':
            this.openpasswor()
            break
          case 'account':
            this.goaccountpage()
            break
        }
      },
      logout() {
        this.$baseConfirm(
          '您确定要退出' + '万骏驾考' + '吗?',
          null,
          async () => {
            await this.$store.dispatch('user/logout')
            if (recordRoute) {
              const fullPath = this.$route.fullPath
              this.$router.push(`/login?redirect=${fullPath}`)
            } else {
              this.$router.push('/login')
            }
          }
        )
      },
    },
  }
</script>
<style lang="scss" scoped>
  .avatar-dropdown {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    height: 50px;
    padding: 0;

    .user-avatar {
      width: 40px;
      height: 40px;
      cursor: pointer;
      border-radius: 50%;
    }

    .user-name {
      position: relative;
      margin-left: 5px;
      margin-left: 5px;
      cursor: pointer;
    }
  }
</style>
